<template>
       <div>

     <el-table :data="tableData" style="width: 100%;height:calc(100vh - 3.6rem)"   cell-class-name="cell-row" header-cell-class-name="header-row">
    <el-table-column prop="saleDate" label="销售日期"  />
    <el-table-column prop="productName" label="产品名称" />
    <el-table-column prop="specification" label="产品规格 " />
        <el-table-column prop="salesNum" label="销售数量 " />
            <el-table-column prop="salesAmount" label="销售金额 " />
              <el-table-column prop="buyerName" label="买方名称 " />
            <template #append>
             <div class="table-append">
                 <el-button size="small" v-if="datano && tableData.length>0" @click="getData"  :loading="logding" type="primary">点击加载更多</el-button>
                 <span v-if="!datano&& tableData.length>0">暂无更多数据</span>
            </div>
            </template>
            </el-table>
        </div>
</template>

<script>
export default {
         data(){
             return{
                 headerStyle:{
                     'background':'#F3F3F3'
                 },
                 tableData:[],
                 pageNumbtn:0,
                 pagetotalbtn:0,
                 logding:false,
                 form:{
                    pageSize:20,
                    pageNum:0,
                    pagetotal:0,
                 },
                 datano:false
             }
         },
         created(){
           this.getData()
         },
         methods:{
           async  getData(){
             this.logding =true
             this.form.pageNum++
            let res  =  await this.$API.clientM.customerInfo.salesDetails.post(this.form)
            console.log(res)
            if(res.code=='0'){
              if(res.data.length<this.form.pageSize){
                this.datano = false
              }else{
                  this.datano = true
              }
                this.logding = false
                this.tableData = [...this.tableData,...res.data]
            }
           }
         }
}
</script>

<style scoped>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
/deep/.el-table .header-row {
  background-color:#FFF8EC !important;
  height: 60px;
}
/deep/.el-table .header-row .cell{
    /* margin-top: 2.5rem; */
    text-align: center;
    font-size: 15px;
font-weight: 400;
color: var(--el-color-text-3);
line-height: 22px;
}
/deep/.el-table__row .cell-row{
    height: 60px !important;
}
/deep/.cell-row .cell{
      text-align: center;
    font-size: 15px;
font-weight: 400;
color: var(--el-color-text-3);
line-height: 22px;
}
.table-append{
  width: 100%;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
}
</style>